import { GStyleSheet } from '@/utils/DarkMode';
import Taro from '@tarojs/taro';
import { Image, Text, View } from '@tarojs/components';
import PageContainer from '@/components/PageContainer';
import React from 'react';
import I18n from 'i18n-js';
import FlexScrollView from '@/components/FlexScrollView';

const dstyles = GStyleSheet.create({
  container: {
    paddingTop: '20px'
  },
  item: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center'
  },
  scroll: {
  },
  title: {
    width: '100%',
    display: 'block',
    fontSize: '18px',
    padding: '0 20px',
    fontWeight: 'bold',
    boxSizing: 'border-box',
    marginBottom: 4
  },
  subTitle: {
    width: '100%',
    display: 'block',
    padding: '0 40px',
    boxSizing: 'border-box',
    color: '#333333'
  },
  image: {
    width: '70%',
  }
})

const AndroidTips = () => {
  const styles = dstyles.style;

  return (
    <View style={styles.container}>
      <Item
        title="1、打开手机系统定位开关"
        text="具体操作：设置-定位服务-开启"
        images={["https://xbgroup-static.gizwits.com/cybertron/users/391941/media/1@3x_1741347414471.png"]}
      ></Item>

      <Item
        title="2、打开微信定位权限"
        text="具体操作：设置-应用管理，下滑找到微信，打开权限设置，打开定位开关或设置为使用时允许。"
        images={["https://xbgroup-static.gizwits.com/cybertron/users/391941/media/2@3x_1741347414468.png", "https://xbgroup-static.gizwits.com/cybertron/users/391941/media/3@3x_1741347414474.png", "https://xbgroup-static.gizwits.com/cybertron/users/391941/media/4@3x_1741347414469.png"]}
      ></Item>
    </View>
  )
}

const IOSTips = () => {
  const styles = dstyles.style;

  return (
    <View style={styles.container}>
      {/* <Item
        title="1、打开手机系统定位开关"
        text="具体操作：设置-定位服务-开启"
        images={["https://xbgroup-static.gizwits.com/cybertron/users/391941/media/1@3x_1741347414471.png"]}
      ></Item>

      <Item
        title="2、打开微信定位权限"
        text="具体操作：设置-应用管理，下滑找到微信，打开权限设置，打开定位开关或设置为使用时允许。"
        images={["https://xbgroup-static.gizwits.com/cybertron/users/391941/media/2@3x_1741347414468.png", "https://xbgroup-static.gizwits.com/cybertron/users/391941/media/3@3x_1741347414474.png", "https://xbgroup-static.gizwits.com/cybertron/users/391941/media/4@3x_1741347414469.png"]}
      ></Item> */}
    </View>
  )
}
export default () => {
  const systemInfo = Taro.getSystemInfoSync();
  const isIOS = systemInfo.platform === 'ios';
  const styles = dstyles.style;
  let component: any = null;
  if(isIOS) {
    component = (
      <IOSTips></IOSTips>
    )
  }else {
    component = (
      <AndroidTips></AndroidTips>
    )
  }
  return (
    <PageContainer title={I18n.t('位置权限')}>
      <View style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <FlexScrollView id='alarmList' scrollStyle={styles.scroll}>
      {component}
        </FlexScrollView>
        </View>
    </PageContainer>
  )
}


const Item = ({ title, text, images }) => {
  const styles = dstyles.style;
  return (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.subTitle}>{text}</Text>
      {
        images.map(item => {
          return (
            <Image mode="aspectFit" style={styles.image} src={item}></Image>
          )
        })
      }
    </View>
  )
}